<template>
	<z-paging ref="paging" bgColor="#FFECE6" class="content" v-model="dataList" @query="queryList">
		<template #top>
			<my-navbar
				:bgUrl="`${$imgurl}/static/ml-bg.png`"
				:logo="`${$imgurl}/static/logo-ml.png`"
				:logoText="`${$imgurl}/static/logo-text-ml.png`"
			/>
			<view class="box tab-box">
				<view class="item" @click="onTab(index)" :class="{on:tab_i==index}" :style="tab_i==index?`background: url(${$imgurl}/static/tab-ml-bg.png) no-repeat; background-size: 100% 100%;padding-bottom:12rpx`:''" v-for="(item,index) in tab">
					<view class="bg" >{{item.name}}</view> 
				</view>
			</view>
			<view class="title-box">
				<view class="box">
					<view class="item " :class="{on:order_i>0}" @click="onShowSheetOrder">
						{{['综合', '倒序', '顺序'][order_i]}} <image :src="`${$imgurl}/static/icon-xia.png`" mode=""></image>
					</view>
					<view class="item" :class="{on:status!==0}" @click="onShowSheetStatus">
						{{['状态', '未破解', '已破解'][status]}} <image :src="`${$imgurl}/static/icon-xia.png`" mode=""></image>
					</view>
					<view class="item" :class="{on:form!==0}"  @click="onShowSheetForm">
						{{['发起方', '自己', '别人'][form]}} <image :src="`${$imgurl}/static/icon-xia.png`" mode=""></image>
					</view>
					<view class="item" :class="{on:is_join!==0}"  @click="onShowSheetJoin">
						{{['参与情况', '已参与', '未参与'][is_join]}} <image :src="`${$imgurl}/static/icon-xia.png`" mode=""></image>
					</view>
				</view>
			</view>
		</template>
		<my-list-gift :list='dataList'></my-list-gift>
		
	</z-paging>
	<!-- <my-crack-gift ref="carckRef"></my-crack-gift> -->
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onShow,onShareAppMessage} from "@dcloudio/uni-app"
	import {getGiftList,subjectGiftInfo,joinGift} from "@/api/gift.js"
	import {rewardApi,setShareNumApi} from "@/api/public.js"
	onShow(()=>{
		
		if(uni.getStorageSync('tabIndex')===0||uni.getStorageSync('tabIndex')===1){
			if(tab_i.value!=uni.getStorageSync('tabIndex')){
				if(paging.value){
					onTab(uni.getStorageSync('tabIndex'))
				}
			}
			uni.setStorageSync('tabIndex',null)
		}
	})
	const carckRef=ref(null)
	const paging=ref(null)
	const tab_i=ref(0)
	const tab=ref([
		{
			name:'用户创建'
		},
		{
			name:'平台创建'
		}
	])
	const dataList=ref([])

	const onTab=(e)=>{
		tab_i.value=e
		status.value=0
		form.value=0
		is_join.value=0
		paging.value.reload()
	}
	const queryList=async (pageNo, pageSize)=>{
		let res=[]
		let post={page:pageNo,limit:pageSize,type:tab_i.value+1,is_join:['', 1, 2][is_join.value],form:['', 'self', 'other'][form.value],crack_status:['', 0, 1][status.value],order_by:['', 'time_desc', 'time_asc'][order_i.value]};
		
		try {
			let re=await getGiftList(post)
			res=re.data.list
		} finally {
			//TODO handle the exception
			paging.value.complete(res);
		}
	}
	
	
	//立即破解点击
	const onAnswer=async (id)=>{
		carckRef.value.onAnswer(id)
	}
	const onShowSheet=()=>{
		status.value=0
		form.value=0
		is_join.value=0
		paging.value.reload()
	}
	const status=ref(0)
	const onShowSheetStatus=()=>{
		uni.showActionSheet({
			itemList: ['全部', '未破解', '已破解'],
			success: function (res) {
				status.value=res.tapIndex;
				paging.value.reload()
			}
		});
	}
	const form=ref(0)
	const onShowSheetForm=()=>{
		uni.showActionSheet({
			itemList: tab_i.value==1?["平台"]:['全部', '自己', '别人'],
			success: function (res) {
				form.value=res.tapIndex;
				paging.value.reload()
			}
		});
	}
	const is_join=ref(0)
	const onShowSheetJoin=()=>{
		uni.showActionSheet({
			itemList: ['全部', '已参与', '未参与'],
			success: function (res) {
				is_join.value=res.tapIndex;
				paging.value.reload()
			}
		});
	}
	
	const order_i=ref(0)
	const onShowSheetOrder=()=>{
		uni.showActionSheet({
			itemList: ['综合', '倒序', '顺序'],
			success: function (res) {
				order_i.value=res.tapIndex;
				paging.value.reload()
			}
		});
	}
	
	
	
</script>

<style lang="scss" scoped>
	.content{
		::v-deep{
			.zp-view-super{
				background-color: #FFECE6;
			}
		}
	}
	.tab-box{
		display: flex;
		gap: 26rpx;
		padding-top:20rpx;
		align-items: flex-start;
		.item{
			flex:1;
			text-align: center;
			background:#FFE4DB;
			line-height: 72rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			color:#FF435C;
			font-weight: bold;font-size: 32rpx;
			position: relative;
			
			&.on{
				background: linear-gradient( 138deg, #FFA640 0%, #FF401A 100%);
				.bg{
					 background: -webkit-linear-gradient(#FFE4DB, #FFFFFF);
					    -webkit-background-clip: text;
					    -webkit-text-fill-color: transparent;
					    /* 为了更好的兼容性，可以添加下面的属性 */
					    background-clip: text;
					    color: transparent; /* 确保文本颜色透明 */
				}
				&::after{
					// content: "";
					// width:20rpx;height:20rpx;
					// display: block;
					// left:50%;
					// bottom:-10rpx;
					// position: absolute;
					// background: linear-gradient( 138deg, #FFA640 0%, #FF401A 100%);
					// transform:  translateX(-10rpx) rotate(-45deg);
				}
			}
		}
	}
	.title-box{
		position: relative;
		z-index: 2;
		margin-top: 40rpx;
		width: 750rpx;
		height: 128rpx;
		background: linear-gradient( 180deg, #FFB0AA 0%, #FFECE6 65%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		border: 2rpx solid #fff;
		border-bottom: 0;
		box-sizing: border-box;
		padding-top: 32rpx;
		.box{
			display: flex;
			gap: 12rpx;
			.item{
				flex:1;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 64rpx;
				background-color: #fff;
				border-radius: 12rpx;
				font-size: 28rpx;
				&.on{
					font-weight: bold;
				}
				image{
					width:16rpx;height:8rpx;margin-left: 8rpx;
				}
			}
		}
	}
	
	
</style>
